<template>
	<view>
		<!-- 头部导航 -->
		<view class="tabbbar">
		  <text class="quxiaojiantou"><</text>
		  <text class="tabtext">修改登录密码</text>
		</view>
    
    <!-- 修改密码主界面 -->
    <view class="chanpass">
     <view >
        <input type="text" value=""  placeholder="请输入手机号" placeholder-class="inputclss"/>
     </view>
      <view class="yanzheng">
        <input type="text" value="" placeholder="请输入验证码" placeholder-class="inputclss"/> 
        <button >获取验证码</button>
      </view>
      <view >
        <input type="password" value=""  placeholder="请输入密码 " placeholder-class="inputclss"/>
      </view>
      <view >
        <input type="password" value="" placeholder="请再次输入密码" placeholder-class="inputclss"/>   
      </view>
      <view >
        <button type="default" class="buttonBC">保存</button>
      </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
 /* tabbar */
.tabbbar {
  width: 100%;
  height: 116rpx;
 background: url(../img/tabbar.png) no-repeat;
  background-size: cover;
  opacity: 0.3;
  

}
.quxiaojiantou {
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
      line-height: 114rpx;
      margin-left: 50rpx;
}
.tabtext {
  width: 70rpx;
  height: 34rpx;
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 30rpx;

 margin-left: 200rpx;
}
/* 修改主页面 */
.chanpass {
  margin: 16rpx 30rpx;
  width: 690rpx;
  height: 582rpx;
  background: #FFFFFF;
  box-shadow: 0px 5rpx 40rpx 0px rgba(192, 192, 192, 0.33);
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}
.chanpass view {
  height: 114rpx;
  border-bottom: 1px solid #F5F5F5;
  display: flex;
  justify:center; 
  align-items:center;  
  display:-webkit-flex;
  padding-left: 46rpx;
}

.yanzheng {
  display: flex;
  }
  .yanzheng button {
    width: 200rpx;
    height: 63rpx;
    border: 2px solid #AAAAAA;
    border-radius: 5rpx;
    font-size: 26rpx;
    color: #8FCF2E;
    text-align: center;
    line-height: 63rpx;

  }
 .inputclss {
         /* placeholder颜色  */
         color: #AAAAAA;
         /* placeholder字体大小  */
         font-size: 28rpx;
  }
  .buttonBC {
    position: relative;
    top: 50%;
    width: 393rpx;
    height: 84rpx;
    background: linear-gradient(90deg, #D2F79A 1%, #8DCE2A 100%);
    box-shadow: 0px 2rpx 15rpx 6rpx rgba(159, 217, 72, 0.33);
    border-radius: 42rpx;
    font-size: 32rpx;
    color: #FFFFFF;

  }
</style>
